<template>
  <div class="uploadcredent">
    <div class="head">
      <mt-header :title="title">
        <router-link to="/" slot="left">
          <mt-button icon="back"></mt-button>
        </router-link>
      </mt-header>
    </div>
    <div class="content">
        <ul>
            <li>
                <label for="">汇款账号</label>
                <input type="text" placeholder="请输入您汇款的银行账号">
            </li>
            <li>
                <label for="">汇款人</label>
                <input type="text" placeholder="请输入您汇款的银行开户姓名">
            </li>
            <li>
                <span>汇款金额</span>
                <span>2750.00</span>
            </li>
        </ul>
        <div class="proof">
            <p>汇款凭证</p>
            <div class="proofCont clearfix">
                <!-- <div class="divImg uploadImg fl">
                  <img src="../assets/updown@2x.png" alt class="imgBIMG">
                  <img src="../assets/updown@2x.png" height="59" width="59" class="deleteImg">
                </div> -->
                <div class="uploadDIv fl" >
                  <span>+</span>
                  <!-- <span>可添加三张</span> -->
                  <input type="file" name="file"  id="inputs" accept="image/*" class='fileTest'
                  multiple="multiple" />
                </div>
            </div>
        </div>
    </div>
    <div class="btn">
        提交
    </div>
  </div>
</template>

<script>
export default {
  name: "uploadcredent",
  data() {
    return {
      title: "上传汇款凭证"
    };
  }
};
</script>

<style lang="less" scoped>
@family: AlibabaPuHuiTiR;
@family1: AdobeHeitiStd_regular;
.uploadcredent {
  width: 100%;
  background-color: #f8f8f8;
  font-size: 0;
  .head {
    .mint-header {
      background-color: #fff;
      color: rgb(49, 49, 49);
      font-family: AdobeHeitiStd-Regular;
      font-size: 0.3rem;
      height: 1rem;
    }
  }
  .content{
      margin-top:0.2rem;
      background-color: #fff;
      padding: 0 0.2rem;
      box-sizing: border-box;
      li{
          height: 0.96rem;
          line-height: 0.96rem;
          font-family: @family;
          color:rgb(130,130,130);
          font-size: 0.22rem;
          border-bottom: 1px solid #f8f8f8;
          overflow: hidden;
          label{
              font-size: 0.26rem;
              color:rgb(51,51,51);
              display: inline-block;
              width: 20%;
          }
          input{
              width: 77%;
              height: 95%;
              vertical-align: 2px;
              text-indent: 0.1rem;
              &::placeholder{
                   font-family: @family;
                color:rgb(130,130,130);
                font-size: 0.22rem;
              }
          }
          span{
              display: inline-block;
              &:nth-child(1){
                  font-size: 0.26rem;
                color:rgb(51,51,51);
                display: inline-block;
                width: 20%;
              }
               &:nth-child(2){
                   text-indent: 0.1rem;
               }
          }
      }
      .proof{
          width: 100%;
          margin-top:.56rem;
          >p{
            margin-bottom:.24rem;
            font-size: 0.26rem;
            color:#333;
          }
          .uploadDIv,.uploadNew{
              width: 1.64rem;
              height: 1.64rem;
              
              color: #bfbfbf;
              /* text-align: center;
              line-height: 1.3rem; */
              float: left;
              border: 1px solid #bfbfbf;
              border-radius: 0.15rem;
              position:relative;
              overflow: hidden;
              margin-right:.22rem;
              background:#eee;
          }
          .uploadDIv span:nth-child(1){
              position: absolute;
              display:block;
              font-size:1.5rem;
              line-height:0.5;
              color:#999;
              position: absolute;
              top:15%;
              left:30%;
              margin-left:-0.25rem;

          }
          .uploadDIv span:nth-child(2){
              display:block;
              width: 100%;
              text-align:center;
              font-size:.2rem;
              color:#999;
              position: absolute;
              bottom:.26rem;

          }
          .uploadNew img{
              width: 100%;
              height: 100%;

          }
          .uploadNew div{
              width: 100%;
              height: 100%;
              position:absolute;
              top:0;
              left:0;
              z-index:100;
              
          }
          .uploadNew div i{
              display:block;
              font-size:.5rem;
              color:#999;
              position: absolute;
              top:50%;
              left:50%;
              margin-top:-0.25rem;
              margin-left:-0.25rem;
          }
          // .uploadNew div span{
          //     display:block;
          //     width: 100%;
          //     text-align:center;
          //     font-size:.2rem;
          //     color:#999;
          //     position: absolute;
          //     bottom:.2rem;
          // }
          .uploadDIv input,.uploadNew input{
              width: 1.64rem;
              height: 1.64rem;
              opacity: 0;
              position: absolute;
              right: 0;
              top: 0;
              z-index: 4;
              padding: 0;
          }
          // .uploadImg {
          //   width: 100%;
          //   border-top: 1px solid #eee;
          //   background: white;
          //   z-index: 90;
            .divImg {
              width: 1.64rem;
              height: 1.64rem;
              background-color: #edf0f2;
              margin-right: 0.2rem;
              float: left;
              border-radius: 0.15rem;
              // border: 1px solid #999;
              position: relative;
              img {
                width: 1.64rem;
                height: 1.64rem;
                border-radius: 0.15rem;
                display: block;
              }
              .deleteImg {
                position: absolute;
                right: -0.14rem;
                top: -0.14rem;
                z-index: 10;
                width: 0.28rem;
                height: 0.28rem;
              }
            }
          // }
        }
  }
}
</style>